<template>
    <div class="root">
        <div class="content">
            <div v-if="type=='other'" class="otherfile">
                <div>
                    <img src="../assets/other.svg" width="200px" height="200px" alt="">
                </div>
                <div class="filename">文件类型不支持预览，请下载查看</div>
            </div>
            <div v-if="type=='audio'" class="otherfile">
                <audio :src="url" v-if="type=='audio'" controls="controls">
                    您的浏览器不支持 audio 标签。
                </audio>
            </div>
            <div v-if="type=='video'" class="otherfile">
                <video :src="url" v-if="type=='video'" controls="controls">
                    您的浏览器不支持 video 标签。
                </video>
            </div>

            <div v-if="type=='txt'" class="otherfile">
                <iframe :src="url" height="100%" width=100% style="border: none;"></iframe>
            </div>

            <div v-if="type=='img'" class="otherfile">
                <img :src="url" width="200px" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "priview",
        props:{
            url:{
                type:String,
                required:true
            },
            type:{
                type:String,
                required:true
            },
            name:{
                type:String,
                required:false

            }
        }
    }
</script>

<style scoped>

    .root{
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: center;
    }
    .content{
        width: 70%;
        height: 100%;
        background-color: gainsboro;
        display: flex;
        justify-content: center;
        padding: 10px 30px;
    }
    .otherfile{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .filename{
        font-weight: bold;
        font-size: 20px;
    }
    video{
        width: 75%;
    }
</style>
